import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import { request } from "../../utils";

export interface HomeListItem {
  title: string;
  url: string;
  desc: string;
  price: number;
  maxCount: number;
  colors: string[];
  sizes: string[];
  id: string;
}

interface HomeState {
  loading: boolean;
  error: null | string;
  homeList: HomeListItem[];
}

const initialState: HomeState = {
  loading: true,
  error: null,
  homeList: [],
};

export const asyncFetchList = createAsyncThunk("home/asyncFetchList", async () => {
  const resp = await request.get("/api/product/list");
  return resp.data.data;
});

const homeSlice = createSlice({
  name: "home",
  initialState,
  reducers: {},
  extraReducers: {
    [asyncFetchList.pending.type](state) {
      state.loading = true;
    },
		[asyncFetchList.fulfilled.type](state, action: PayloadAction<HomeListItem[]>) {
      state.loading = false;
			state.homeList = action.payload
    },
  },
});

export default homeSlice
